diff --git a/swh/web/ui/templates/includes/home-directory.html b/swh/web/ui/templates/includes/home-directory.html
new file mode 100644
index 00000000..4183b1cb
--- /dev/null
+++ b/swh/web/ui/templates/includes/home-directory.html
@@ -0,0 +1,111 @@
+<div class="simple-search">
+ <div class="row simple-desc container-fluid">
+ Search a directory according to its SHA1 checksum
+ </div>
+ <form method="get" action="{{ url_for('search_directory') }}">
+ <div class="row">
+ <div class="col-md-6 required">
+ <label for="dir-sha1">Directory ID</label>
+ <div class="input-group">
+ <input id="dir-sha1" class="form-control"
+ type="text" placeholder="directory git SHA1"
+ name="sha1_git" required="true"/>
+ <span class="input-group-btn">
+ <button class="btn btn-primary" type="submit">
+ <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
+ </button>
+ </span>
+ <a class="input-group-addon" data-toggle="collapse" href="#dir-dir-collapse">Options</a>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <div id="dir-dir-collapse" class="collapse">
+ <label for="dir-path-1">Path within directory</label>
+ <input id="dir-path-1" class="optional form-control"
+ type="text" placeholder="path" name="path/">
+ </div>
+ </div>
+ </div>
+ </form>
+</div>
+<hr/>
+<div class="text-center">
+ <a data-toggle="collapse" href="#dir-advanced-search">Advanced search</a>
+</div>
+<div id="dir-advanced-search" data-toggle="collapse" class="collapse advanced-search">
+ <div class="row advanced-desc container-fluid">
+ You can also refer to a directory either:
+ <ul>
+ <li>
+ as a request for the content of a revision identified in absolute
+ terms by its git SHA1.
+ </li>
+ <li>
+ as a request for the content of a revision matching a
+ given time and place, with place the origin of the directory (and optionally its
+ branch name), and time a timestamp of when we collected it (or as close to the
+ timestamp as we can provide).
+ </li>
+ </ul>
+ In all cases, you may also specify a path within the top-level directory to which you
+ would like the results to be constrained.
+ </div>
+ <div>
+ <form method="get" action="{{ url_for('search_directory') }}">
+ <div class="forms-group row">
+ <div class="col-md-6 required">
+ <label for="dir-rev-sha1">Revision ID</label>
+ <div class="input-group">
+ <input id="dir-rev-sha1" class="form-control"
+ type="text" placeholder="revision git SHA1"
+ name="sha1_git" required="true"/>
+ <span class="input-group-btn">
+ <button class="btn btn-primary" type="submit">
+ <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
+ </button>
+ </span>
+ <a class="input-group-addon" data-toggle="collapse" href="#dir-rev-collapse">Options</a>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <div id="dir-rev-collapse" class="collapse">
+ <label for="dir-path-2">Path within directory</label>
+ <input id="dir-path-2" class="optional form-control"
+ type="text" placeholder="path" name="dir_path"/>
+ </div>
+ </div>
+ </div>
+ </form>
+ <form method="get" action="{{ url_for('search_directory') }}">
+ <div class="form-groups row">
+ <div class="col-md-6">
+ <label for="dir-origin-id">Origin ID</label>
+ <div class="input-group">
+ <input id="dir-origin-id" class="form-control"
+ type="text" placeholder="origin id"
+ name="origin_id" required="true"/>
+ <span class="input-group-btn">
+ <button class="btn btn-primary" type="submit">
+ <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
+ </button>
+ </span>
+ <a class="input-group-addon" data-toggle="collapse" href="#dir-origin-collapse">Options</a>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <div id="dir-origin-collapse" class="collapse">
+ <label for="dir-branchname">Branch name</label>
+ <input id="dir-branchname" class="optional form-control"
+ type="text" placeholder="refs/heads/master" name="branch_name"/>
+ <label for="dir-timestamp">Timestamp</label>
+ <input id="dir-timestamp" class="optional form-control"
+ type="text" placeholder="timestamp" name="ts"/>
+ <label for="dir-path-3">Path within the directory</label>
+ <input id="dir-path-3" class="optional form-control"
+ type="text" placeholder="path" name="path"/>
+ </div>
+ </div>
+ </div>
+ </form>
+ </div>
+</div>
diff --git a/swh/web/ui/templates/includes/home-origin.html b/swh/web/ui/templates/includes/home-origin.html
new file mode 100644
index 00000000..8ca5db0a
--- /dev/null
+++ b/swh/web/ui/templates/includes/home-origin.html
@@ -0,0 +1,57 @@
+<div class="simple-search">
+ <div class="row simple-desc container-fluid">
+ Search an origin according to its SWH ID
+ </div>
+ <form method="get" action="{{ url_for('search_directory') }}">
+ <div class="row">
+ <div class="col-md-12">
+ <label>Origin ID</label>
+ <div class="input-group">
+ <input class="form-control" type="text" placeholder="directory git SHA1" name="sha1_git" required="true"/>
+ <span class="input-group-btn">
+ <button class="btn btn-primary" type="submit">
+ <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
+ </button>
+ </span>
+ </div>
+ </div>
+ </div>
+ </form>
+</div>
+<hr/>
+<div class="text-center">
+ <a data-toggle="collapse" href="#origin-advanced-search">Advanced search</a>
+</div>
+<div id="origin-advanced-search" data-toggle="collapse" class="collapse advanced-search">
+ <div class="row advanced-desc container-fluid">
+ You can also refer to a directory in a relative manner, as the combination of the type of origin (git, debian, tarball...)
+ and the URL at which the origin is located.
+ </div>
+ <div>
+ <form method="get" action="{{ url_for('search_origin') }}">
+ <div class="forms-group row">
+ <div class="col-md-12">
+ <div class="input-group multi-input-group">
+ <label for="origin-type">Origin type</label>
+ <input id="origin-type"
+ class="form-control"
+ type="text" placeholder="origin type"
+ name="origin_type" required="true"/>
+ <div class="input-group-field">
+ <label for="origin-url">Origin URL</label>
+ <input id="origin-url"
+ class="form-control"
+ type="text" placeholder="origin url"
+ name="origin_url" required="true"/>
+ </div>
+ <span class="input-group-btn">
+ <button id="origin-dummy-btn" class="btn btn-primary" type="submit">
+ <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
+ </button>
+ </span>
+ </div>
+ </div>
+ </div>
+ </form>
+ </div>
+</div>
diff --git a/swh/web/ui/templates/includes/home-revision.html b/swh/web/ui/templates/includes/home-revision.html
new file mode 100644
index 00000000..043b1077
--- /dev/null
+++ b/swh/web/ui/templates/includes/home-revision.html
@@ -0,0 +1,66 @@
+<div class="simple-search">
+ <div class="row simple-desc container-fluid">
+ Search a revision according to its SHA1 identifier
+ </div>
+ <form method="get" action="{{ url_for('search_revision') }}">
+ <div class="row">
+ <div class="col-md-12">
+ <label for="rev-sha1">Revision SHA1</label>
+ <div class="input-group">
+ <input id="rev-sha1" class="form-control"
+ type="text" placeholder="git SHA1"
+ name="sha1_git" required="true"/>
+ <span class="input-group-btn">
+ <button class="btn btn-primary" type="submit">
+ <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
+ </button>
+ </span>
+ </div>
+ </div>
+ </div>
+ </form>
+</div>
+<hr/>
+<div class="text-center">
+ <a data-toggle="collapse" href="#rev-advanced-search">Advanced search</a>
+</div>
+<div id="rev-advanced-search" data-toggle="collapse" class="collapse advanced-search">
+ <div class="row advanced-desc container-fluid">
+ You can also refer to a revision as an SWH time and place, time being a timestamp of when we
+ collected it (or as close to the timestamp as we can provide), place being an origin, and
+ optionally a branch name within the origin. See the origin section to search for origins in
+ SWH and find out their identifier.
+ </div>
+ <div>
+ <form method="get" action="{{ url_for('search_revision') }}">
+ <div class="forms-group row">
+ <div class="col-md-6 required">
+ <label>Revision Origin ID</label>
+ <div class="input-group">
+ <input class="form-control" type="text" placeholder="revision git SHA1" name="sha1_git" required="true"/>
+ <span class="input-group-btn">
+ <button class="btn btn-primary" type="submit">
+ <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
+ </button>
+ </span>
+ <a class="input-group-addon" data-toggle="collapse" href="#rev-tandp-collapse">Options</a>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <div id="rev-tandp-collapse" class="collapse">
+ <label for="rev-branchname">Branch name</label>
+ <input id="rev-branchname"
+ class="optional form-control"
+ type="text" placeholder="refs/heads/master"
+ name="branch_name"/>
+ <label for="rev-timestamp">Timestamp</label>
+ <input id="rev-timestamp"
+ class="optional form-control"
+ type="text" placeholder="timestamp"
+ name="ts"/>
+ </div>
+ </div>
+ </div>
+ </form>
+ </div>
+</div>
diff --git a/swh/web/ui/templates/search-form.html b/swh/web/ui/templates/includes/search-form.html
similarity index 81%
rename from swh/web/ui/templates/search-form.html
rename to swh/web/ui/templates/includes/search-form.html
index 1303828c..51e0d7bf 100644
--- a/swh/web/ui/templates/search-form.html
+++ b/swh/web/ui/templates/includes/search-form.html
@@ -1,72 +1,70 @@
<!-- The text-based SHA1 or SHA256 search -->
-<h2>Search with SHA-1 or SHA-256:</h2>
+<label for="text-hash-form">Search with SHA-1 or SHA-256:</label>
<form id="text-hash-form"
action="{{ url_for('search_content') }}"
class="form"
method="get">
<br/>
<div class="input-group">
<input id="text-hash-input"
type="text" class="form-control"
name="q"
placeholder="SHA-1 or SHA-256 checksum" />
<span class="input-group-btn">
<button id="text-hash-submit"
class="btn btn-primary"
type="submit">
Text search
</button>
</span>
</div>
</form>
<!-- The file-based drag&drop UI-->
-<h2>Search with files</h2>
+<label for="file-hash-form">Search with files</label>
<form id="file-hash-form"
action="{{ url_for('search_content') }}"
class="text-center form"
method="post"
enctype="multipart/form-data">
<!--Form input -->
<input type="file"
id="file-hash-input"
class="form-control"
multiple
name="filename"
value=""
style="display:none"
placeholder="File(s) to hash and search" />
<div id="file-drop" class="text-center" style="border: 1px dashed black">
Drag and drop or click here to hash files and search for them.
Your files will NOT be uploaded, hashing is done locally.
Filesizes over 20Mb may be slow to process, use with care.
<div id="filelist" class="row"></div>
</div>
<!-- Form buttons -->
<div class="btn-group" style="margin-top: 10px">
<button id="file-hash-submission" type="submit" class="btn btn-primary">
<span class="glyphicon glyphicon-search" type="submit" aria-hidden="true"></span>
Search
</button>
<button id="file-hash-clear" class="btn btn-primary">
Clear
<span class="glyphicon glyphicon-erase" aria-hidden="true"></span>
</button>
</div>
</form>
<!-- Required JS -->
-<script src="{{ url_for('static', filename='lib/core.js') }}"></script>
-<script src="{{ url_for('static', filename='lib/lib-typedarrays.js') }}"></script>
-<script src="{{ url_for('static', filename='lib/sha1.js') }}"></script>
-<script src="{{ url_for('static', filename='lib/sha256.js') }}"></script>
-<script src="{{ url_for('static', filename='js/search.js') }}"></script>
+{% for fname in ['lib/core.js', 'lib/lib-typedarrays.js', 'lib/sha256.js', 'js/search.js'] %}
+<script language="javascript" type="text/javascript" src="{{ url_for('static', filename=fname) }}"></script>
+{% endfor %}
<!-- Script setup -->
<script>
var sfc = new SearchFormController($('#text-hash-form'), $('#file-hash-form'), $('#search-message'));
sfc.setupTextForm($('#text-hash-input'));
sfc.setupFileForm($('#file-drop'),$('#filelist'),$('#file-hash-input'),$('#file-hash-clear'));
</script>
diff --git a/swh/web/ui/templates/search.html b/swh/web/ui/templates/search.html
index d8ee8b7f..f4f0ebaa 100644
--- a/swh/web/ui/templates/search.html
+++ b/swh/web/ui/templates/search.html
@@ -1,47 +1,47 @@
{% extends "layout.html" %}
{% block title %}Search SWH{% endblock %}
{% block content %}
<div class="container">
<!-- Include the predefined search form-->
- {% include 'search-form.html' %}
+ {% include 'includes/search-form.html' %}
{% if search_res is not none %}
<!-- Search result display -->
{% if search_stats is not none %}
<label class="search-stats">
Files available in SWH: {{ '%.2f' | format(search_stats['pct']) }}% of
{{ search_stats['nbfiles'] }} files.
</label>
{% endif %}
<table class="table table-striped search-res">
<thead class="thead-default">
<th>File name</th>
<th>SHA1 checksum</th>
<th>Result</th>
</thead>
{% for res in search_res %}
<tr>
{% if res['filename'] is not none %}
<td>{{ res['filename'] }}</td>
{% else %}
<td>From text input</td>
{% endif %}
{% if res['found'] %}
<td><a href="{{ url_for('browse_content', q=res['sha1']) }}">{{ res['sha1'] }}</a></td>
<td><span class="glyphicon glyphicon-ok file-found"></span></td>
{% else %}
<td>{{ res['sha1'] }}</td>
<td><span class="glyphicon glyphicon-remove file-notfound"></span></td>
{% endif %}
</tr>
{% endfor %}
</table>
{% endif %}
{% if message is not none and message != '' %}
<div class="span8">{{ message | safe }}</div>
</div>
{% endif %}
</div>
{% endblock %}